<script>
// use normal <script> to declare options
export default {
  inheritAttrs: false
}
</script>
<script setup>
import { useAttrs, ref } from 'vue'

const attrs = useAttrs()
const props = defineProps(['title', 'modelValue'])
const emit = defineEmits(['update:modelValue']) 
// console.log(attrs)

function updateValue(event) {
    emit('update:modelValue', event.target.value)
}

const isEdit = ref(false)
function toggleEdit() {
    isEdit.value = !isEdit.value
}

</script>
<template>
    <div class="modifiable-input" >
        <span class="title" >{{ props.title }}</span>
        <div v-if="isEdit == false" class="view" >{{ attrs.type == 'password' ? '******' : props.modelValue }}</div>
        <input v-else :type="attrs.type" :placeholder="attrs.placeholder" @input="updateValue" :value="props.modelValue" />
        <img src="/src/assets/images/super_administrator/edit.svg" alt="Modify" @click="toggleEdit" />
    </div>



</template>
<style scoped >

.modifiable-input {
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;
}

.modifiable-input > .title {
    font-family: Source Han Sans CN;
	font-size: 20px;
    font-weight: bold;
	line-height: 20px;
	color: #707070;
    margin-right: 10px;
}

.modifiable-input > .title::after {
    content: ': '
}

.modifiable-input > .view {
    width: 251px;
	height: 40px;
    outline: none;
    border: none;
    /* background-color: #f1f2f6;
	box-shadow: 0px 3px 6px 0px 
		rgba(0, 0, 0, 0.16);
	border-radius: 6px; */
    font-family: Source Han Sans CN;
	font-size: 18px;
	line-height: 40px;
    padding: 0 5px;
    margin-right: 10px;
    text-align: left;
}

.modifiable-input > input {
    width: 251px;
	height: 40px;
    outline: none;
    border: none;
    background-color: #f1f2f6;
	box-shadow: 0px 3px 6px 0px 
		rgba(0, 0, 0, 0.16);
	border-radius: 6px;
    font-family: Source Han Sans CN;
	font-size: 18px;
	line-height: 40px;
    padding: 0 5px;
    margin-right: 10px;
}

.modifiable-input > img {
    cursor: pointer;
    user-select: none;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}

.modifiable-input > img.disable {
    cursor: not-allowed;
}


</style>